<template>
  <div class="operate">
    <!-- 带客量 -->
    <view-item class="client">
      <div slot="itemData" class="itemData">
        <p class="rate">
          <span>客户成交率</span>
          <i-count-up
          :startVal="startVal"
          :endVal="withStorage.customerTurnoverRate"
          :decimals="decimals"
          :duration="duration"
          :options="options"
          @ready="onReady">
          </i-count-up>
          <i class="units">%</i>
        </p>
        <i class="bossVersion">&#xe60b;</i>
        <div class="num">
          <p class="title">带客量</p>
          <div class="value">
            <p>
              <i-count-up
              :startVal="startVal"
              :endVal="withStorage.currentMonthFollowCount"
              :decimals="decimals"
              :duration="duration"
              :options="options"
              @ready="onReady">
              </i-count-up>
              <i class="units">人</i>
            </p>
            <p>
              <span class="txt">同比上月</span>
              <span class="numValue">
                {{withStorage.currentMonthFollowCountRatio}}
                <i class="units">%</i>
              </span>
              <i class="rise"></i>
            </p>
          </div>
        </div>
      </div>
    </view-item>
    <!-- 销售额 -->
    <view-item class="quota">
      <div slot="itemData" class="itemData">
        <p class="rate">
          <span>销售额达成率</span>
          <span>
            77
            <i class="units">%</i>
          </span>
        </p>
        <i class="bossVersion">&#xe609;</i>
        <div class="num">
          <p class="title">销售额</p>
          <div class="value">
            <p>
              <i-count-up
              :startVal="startVal"
              :endVal="sellData.currentMonthDealAmount"
              :decimals="decimals"
              :duration="duration"
              :options="options"
              @ready="onReady">
              </i-count-up>
              <i class="units">万元</i>
            </p>
            <p>
              <span class="txt">同比上月</span>
              <span class="numValue">
                {{sellData.currentMonthDealAmountRatio}}
                <i class="units">%</i>
              </span>
              <i class="rise"></i>
            </p>
          </div>
        </div>
      </div>
    </view-item>
    <!-- 销售量 -->
    <view-item class="amount">
      <div slot="itemData" class="itemData">
        <p class="rate">
          <span>销售量达成率</span>
          <span>
            77
            <i class="units">%</i>
          </span>
        </p>
        <i class="bossVersion">&#xe607;</i>
        <div class="num">
          <p class="title">销售量</p>
          <div class="value">
            <p>
              <i-count-up
              :startVal="startVal"
              :endVal="sellData.currentMonthCount"
              :decimals="decimals"
              :duration="duration"
              :options="options"
              @ready="onReady">
              </i-count-up>
              <i class="units">套</i>
            </p>
            <p>
              <span class="txt">同比上月</span>
              <span class="numValue">
                {{sellData.currentMonthCountRatio}}
                <i class="units">%</i>
              </span>
              <i class="decline"></i>
            </p>
          </div>
        </div>
      </div>
    </view-item>
    <!-- 成交量趋势 -->
    <div class="trend">
      <item-title>
        <span slot="txt" class="txt">成交量趋势</span>
      </item-title>
      <view-item class="chartItem">
        <div slot="itemData" class="chartData">
          <div class="chartTips">单位:万元</div>
          <line-chartss id="mylineChartss" v-model="trendData" :option="lineChartOption"></line-chartss>
        </div>
      </view-item>
    </div>
    <!-- 成交均价趋势 -->
    <div class="trend">
      <item-title>
        <span slot="txt" class="txt">成交均价趋势</span>
      </item-title>
      <view-item class="chartItem">
        <div slot="itemData" class="chartData">
          <div class="chartTips">单位:元</div>
          <line-chartss id="mylineChartss" v-model="averagePriceData" :option="lineChartOption"></line-chartss>
        </div>
      </view-item>
    </div>
    <!-- 销售渠道 -->
    <div class="trend">
      <item-title>
        <span slot="txt" class="txt">销售渠道</span>
      </item-title>
      <view-item class="chartItem">
        <div slot="itemData" class="chartData">
          <div class="chartTips">单位:万元</div>
          <bar-charts v-model="distributionChannelArr" :option="channelOption"></bar-charts>
        </div>
      </view-item>
    </div>
    <!-- 楼盘存量 -->
    <div class="trend">
      <item-title>
        <span slot="txt" class="txt">楼盘存量</span>
      </item-title>
      <view-item class="stock">
        <div slot="itemData" class="chartData">
          <div class="top">
            <div class="tableHead">
              <span>商品类型</span>
              <span>已售</span>
              <span>存量</span>
            </div>
            <div class="tableContent">
              <div class="li" v-for="(item,index) in tableData" :key="index">
                <span>{{item.name}}</span>
                <span>{{item.sold}}</span>
                <span>{{item.stock}}</span>
              </div>
            </div>
          </div>
          <div class="bot">
            <div class="left">
              <div class="chartTips">单位:套</div>
              <pie-chart v-model="stockArr" :option="shareOption"></pie-chart>
            </div>
            <em></em>
            <div class="right">
              <p class="title">点击左边各项
                <br>以显示明细
              </p>
            </div>
          </div>
        </div>
      </view-item>
    </div>
  </div>
</template>

<script>
import ICountUp from "vue-countup-v2";
import pieChart from "@/components/Chart/pieChart";
import lineChartss from "@/components/Chart/lineChartssSmooth";
import barCharts from "@/components/Chart/barCharts";
import itemTitle from "@/components/bossVersion/itemTitle";
import viewItem from "@/components/bossVersion/viewItem";
import {
  GetRealEstateTakeALook,
  GetRealEstateMarketingData,
  GetDoubleDetailList,
  GetSaleAnalyseStatueList,
  GetDataByTargetForTwo
} from "@/api/bossVersion/realEstate";
export default {
  components: {
    ICountUp,
    pieChart,
    lineChartss,
    barCharts,
    itemTitle,
    viewItem
  },
  data() {
    return {
      // 数字
      startVal: 0,
      endVal: 0,
      decimals: 0,
      duration: 2.5,
      options: {
        useEasing: true,
        useGrouping: true,
        separator: ",",
        decimal: ".",
        prefix: "",
        suffix: ""
      },
      tableData: [
        { name: "公寓", sold: 0, stock: 0 },
        { name: "住宅", sold: 0, stock: 0 },
        { name: "商铺", sold: 0, stock: 0 },
        { name: "储藏间", sold: 0, stock: 0 },
        { name: "车位", sold: 0, stock: 0 },
        { name: "合计", sold: 0, stock: 0 }
      ], // 表格数据
      sellData: {
        currentMonthCount: 0,
        currentMonthCountRatio: 0,
        currentYearCount: 0,
        currentYearCountRatio: 0,
        currentMonthDealAmount: 0,
        currentMonthDealAmountRatio: 0,
        currentYearDealAmount: 0,
        currentYearDealAmountRatio: 0
      }, // 销售数据
      withStorage: {
        currentMonthFollowCount: 0,
        currentMonthFollowCountRatio: 0,
        customerTurnoverRate: 0
      }, // 带客量
      stockArr: [], // 楼盘存量
      shareOption: {
        color: ["#48e5ff", "#f0bd26", "#28e787", "#ff3e9a", "#FF7145"],
        radius: ["35%", "55%"],
        center: ["50%", "50%"],
        // roseType: "radius",
        startAngle: 250,
        formatter: function(value) {
          return "{value|" + value.name + "}";
        },
        hidePieMargin: true,
        showLine: true,
        showLabel: true,
        legend: {
          show: false
        }
      },
      trendData: [], // 成交量趋势
      averagePriceData: [], // 成交均价趋势
      // 成交量趋势 option
      lineChartOption: {
        noSmooth: true,
        dataZoom: [
          {
            show: false
          }
        ],
        toolTipTxtColor: "#48e5ff",
        grid: {
          top: "20%",
          left: "10%",
          height: "50%"
        },
        legendColor: "#48e5ff",
        legend: {
          top: -5,
          right: 0,
          data: [
            {
              icon: "rect"
            },
            {
              icon: "rect"
            },
            {
              icon: "rect"
            },
            {
              icon: "rect"
            },
            {
              icon: "rect"
            }
          ]
        },
        hideLineColor: true,
        showSymbol: "none",
        tooltip: {
          show: true,
          axisPointer: {
            type: "shadow",
            shadowStyle: {
              color: "rgba(72, 229, 255, 0.2)",
              shadowBlur: 10,
              shadowColor: "#48e5ff"
            }
          }
        },
        showLabel: false,
        xAxis: {
          z: 10,
          boundaryGap: false,
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            rotate: 45,
            inside: false,
            rich: {
              value: {
                color: "#48e5ff"
              }
            }
          }
        },
        yAxis: {
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: "rgba(47, 240, 210, 0.2)",
              type: "dashed"
            }
          },
          axisLabel: {
            color: "#48e5ff"
          }
        },
        color: ["#FAAF3B", "#28e787", "#ff3e9a", "#48e5ff", "#ff7145"]
      },
      distributionChannelArr: [], // 销售渠道
      // 销售渠道 option
      channelOption: {
        dataZoom: [
          {
            type: "inside"
          },
          {
            type: "slider",
            show: false
          }
        ],
        hidePieMargin: true,
        color: ["#28e787", "#f0bd26", "#48e5ff"],
        legend: {
          top: -5,
          right: "0%",
          data: [
            {
              icon: "rect"
            },
            {
              icon: "rect"
            },
            {
              icon: "rect"
            }
          ]
        },
        grid: {
          top: "20%",
          left: "12%",
          height: "50%"
        },
        xAxis: {
          axisLabel: {
            rotate: 45
          }
        },
        labelDefault: 3
      }
    };
  },
  mounted() {
    this.GetRealEstateTakeALookFun(); // 获取带客量数据
    this.GetSellFun(); // 获取销售数据
    this.GetTrendData();
    this.GetAveragePriceData();
    this.GetDistributionChannelArr();
    this.GetStockArr();
    this.GetTableData();
  },
  methods: {
    async GetRealEstateTakeALookFun() {
      try {
        var res = await GetRealEstateTakeALook();
        if (res.data.code === "0") {
          this.$set(this, "withStorage", res.data.result);
        }
      } catch (e) {
        console.log(e);
      }
    },
    async GetSellFun() {
      try {
        var res = await GetRealEstateMarketingData();
        if (res.data.code === "0") {
          this.$set(this, "sellData", res.data.result);
        }
      } catch (e) {
        console.log(e);
      }
    },
    // 获取成交量图表数据
    async GetTrendData() {
      const p = {
        queryType: "27002",
        timeType: "3014",
        timeAccuracy: "4003"
      };
      try {
        var res = await GetDoubleDetailList(p);
        if (res.data.code === "0") {
          res.data.result.forEach(element => {
            element.xData1 = this.$utils.formatterMonthFun(element.xData1);
          });
          this.$set(this, "trendData", res.data.result);
        }
      } catch (e) {
        console.log(e);
      }
    },
    // 获取成交均价趋势图表数据
    async GetAveragePriceData() {
      const p = {
        queryType: "27004",
        timeType: "3014",
        timeAccuracy: "4003"
      };
      try {
        var res = await GetDoubleDetailList(p);
        if (res.data.code === "0") {
          res.data.result.forEach(element => {
            element.xData1 = this.$utils.formatterMonthFun(element.xData1);
          });
          this.$set(this, "averagePriceData", res.data.result);
        }
      } catch (e) {
        console.log(e);
      }
    },
    // 获取销售渠道图表数据
    async GetDistributionChannelArr() {
      const p = {
        queryType: "27016",
        timeType: "3014",
        timeAccuracy: "4003"
      };
      try {
        var res = await GetDoubleDetailList(p);
        if (res.data.code === "0") {
          res.data.result.forEach(element => {
            element.xData1 = this.$utils.formatterMonthFun(element.xData1);
          });
          this.$set(this, "distributionChannelArr", res.data.result);
        }
      } catch (e) {
        console.log(e);
      }
    },
    // 获取楼盘存量表格数据
    async GetTableData() {
      try {
        var res = await GetSaleAnalyseStatueList();
        if (res.data.code === "0") {
          // debugger;
          this.$set(this, "tableData", res.data.result);
        }
      } catch (e) {
        console.log(e);
      }
    },
    // 获取楼盘存量图表数据
    async GetStockArr() {
      const p = {
        queryType: "27013",
        timeType: "3014"
      };
      try {
        var res = await GetDataByTargetForTwo(p);
        if (res.data.code === "0") {
          this.$set(this, "stockArr", res.data.result.list);
        }
      } catch (e) {
        console.log(e);
      }
    }
  }
};
</script>

<style lang="scss" scoped>
@import "../../style/bossVersion/_basics";

.operate {
  line-height: 1;
  .item {
    height: 1.35rem;
    margin-bottom: 0.1rem;
    .itemData {
      @include flexYcen;
      .rate {
        @include flexYcen;
        @include absoluteTRSide(0.04, 0.06, 1);
        & > span:nth-of-type(1) {
          margin-right: 0.03rem;
          font-size: 0.12rem;
        }
        & > span:nth-of-type(2) {
          // margin-left: 0.05rem;
          @include din(0.15rem);
          & > i {
            font-size: 0.12rem;
          }
        }
      }
      .bossVersion {
        margin-right: 0.1rem;
        font-size: 0.33rem;
      }
      .num {
        & > .title {
          margin-bottom: 0.03rem;
          @include bold(0.14rem);
        }
        & > .value {
          @include flexYbase;
          & > p:nth-of-type(1) {
            display: flex;
            align-items: baseline;
            & > span {
              @include din(0.34rem);
            }
            & > .units {
              margin-left: 0.03rem;
              font-size: 0.12rem;
            }
          }
          & > p:nth-of-type(2) {
            @include flexYend;
            position: relative;
            margin-left: 0.1rem;
            font-size: 0.12rem;
            & > .txt {
              font-size: 0.12rem;
            }
            & > .numValue {
              margin-left: 0.03rem;
              margin-bottom: -0.05rem;
              @include din(0.14rem);
              line-height: 1.5;
              & > i {
                font-size: 0.12rem;
              }
            }
            & > .rise,
            .decline {
              position: absolute;
              right: -0.13rem;
              bottom: 1px;
              z-index: 1;
              margin-left: 0;
            }
            & > .decline {
              bottom: 0;
            }
          }
        }
      }
    }
    &:nth-last-of-type(1) {
      margin-bottom: 0;
    }
  }
  .client {
    color: $color3;
  }
  .quota {
    color: $color4;
  }
  .amount {
    color: $color1;
  }
  // 成交量趋势 / 成交均价趋势 / 销售渠道 / 楼盘存量
  .trend {
    .chartItem {
      height: 1.65rem;
      .chartData {
        position: relative;
        z-index: 1;
        height: 100%;
        .chartTips {
          @include absoluteTLSide(0, 0, 1);
        }
      }
    }
    .stock {
      height: initial;
      & > .chartData {
        & > .top {
          & > .tableHead {
            @include flexYcen;
            width: 100%;
            height: 0.3rem;
            background-color: $color9;
            & > span {
              width: calc(100% / 3);
              color: $color3;
              @include bold(0.14rem);
              text-align: right;
              &:nth-of-type(1) {
                padding-left: 0.17rem;
                text-align: left;
              }
              &:nth-of-type(2) {
                padding-right: 0.2rem;
              }
              &:nth-last-of-type(1) {
                padding-right: 0.26rem;
              }
            }
          }
          & > .tableContent {
            position: relative;
            z-index: 1;
            padding: 0 0.08rem;
            margin: 0.08rem 0 0.18rem;
            & > .li {
              @include flexYcen;
              &:nth-child(2n) {
                background-color: $contentBack;
              }
              & > span {
                width: calc(100% / 3);
                height: 0.3rem;
                line-height: 0.3rem;
                color: $color4;
                @include din(0.14rem);
                text-align: right;
                &:nth-of-type(1) {
                  padding-left: 0.17rem;
                  color: $color1;
                  font-size: 0.12rem;
                  text-align: left;
                }
                &:nth-of-type(2) {
                  padding-right: 0.2rem;
                }
                &:nth-of-type(3) {
                  padding-right: 0.18rem;
                }
              }
            }
            &::before {
              content: "";
              position: absolute;
              top: 0;
              left: 1.15rem;
              z-index: 1;
              width: 1px;
              height: calc(100% - 0.05rem);
              background-color: $color9;
            }
            &::after {
              content: "";
              position: absolute;
              top: 0;
              right: 1.07rem;
              z-index: 1;
              width: 1px;
              height: calc(100% - 0.05rem);
              background-color: $color9;
            }
          }
        }
        & > .bot {
          @include flexYcen;
          height: 1.62rem;
          border-top: 1px solid $color9;
          & > .left {
            position: relative;
            width: calc(100% - 1.07rem);
            height: 100%;
            .chartTips {
              position: absolute;
              top: 0.1rem;
            }
          }
          & > em {
            width: 1px;
            height: 1.25rem;
            margin-left: 0.15rem;
            margin-right: 0.15rem;
            background-color: $color9;
          }
          & > .right {
            width: 1.07rem;
            color: $color1;
            text-align: center;
            & > .title {
              font-size: 0.12rem;
              line-height: 1.5;
            }
          }
        }
      }
    }
  }
}
</style>
